<template>
  <div class="header">
    <img class="header-logo" src="@/assets/images/logo.png" />
    <div class="header-input" @click="gotoSearch">
      <i class="iconfont icon-fangdajing"></i>
      <span>搜您喜欢的...</span>
      <!-- <input type="text" name="" id="" placeholder="搜您喜欢的..." /> -->
    </div>
    <div class="header-icon">
      <img src="@/assets/images/home.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  methods: {
    gotoSearch() {
      this.$router.push("/search");
    },
  },
};
</script>

<style lang='scss' scoped>
.header {
  background-color: #95111c;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  left: 0;
  top: 0;
  height: 1.3333rem;
  width: 100%;
  // padding: 0 0.2667rem;
  z-index: 999;

  &-logo {
    width: 2.5rem;
    margin-left: 0.2667rem;
  }
  &-input {
    border: 0.0267rem solid #fff;
    background-color: #fff;
    width: 90%;
    height: 0.8rem;
    border-radius: 0.4533rem;
    padding: 0 0.2133rem;
    color: rgb(179, 171, 171);
    display: flex;
    align-items: center;
    margin: 0 0.1333rem;

    i {
      font-size: 0.48rem;
      padding-right: 0.1333rem;
    }

    span {
      font-size: 0.4267rem;
    }
  }
  // input {
  //   width: 100%;
  //   height: 0.8rem;
  //   border-radius: 0.4533rem;
  //   outline: none;
  //   border: none;
  //   padding: 0 0.4267rem;
  // }
  &-icon {
    img {
      width: 85%;
    }
  }
}
</style>